<!-- 套系列表 -->
<template>
    <div class="com-container">
        <xszk-header 
            :isHeadSearch="true"
            :isLoginShow="isLoginShow"
            @onLogin="isLoginShow=true"
            @onClose="isLoginShow=false"
        ></xszk-header>
        <div class="com-main">
            <div class="mt30">
                <el-breadcrumb separator=">">
                    <el-breadcrumb-item :to="{ path: '/index' }" class="com-crumb">首页</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: '/serIntroduce',query:{productId:getProductId} }" class="com-crumb">{{secondLvName}}</el-breadcrumb-item>
                    <el-breadcrumb-item class="com-crumb">{{threeLvName}}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="seach-label">
                <div class="seach-warp fl">
                    <el-select 
                        v-model="seachVal"
                        class="seacher-select no-popper-arrow fl"
                        :popper-append-to-body="false"
                        @change="seachChange"
                        value-key="id"
                    >
                        <el-option
                            v-for="item in seachList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                    <div class="line-gap fl"></div>
                    <input type="text" v-model="seachKey" placeholder="搜索该套系内容" class="seach-input fl">
                    <img src="@/static/images/seach_icon.png" class="seach-icon cp fr">
                </div>
                <button class="seach-btn cfff bgtheme fl">搜索</button>
                <button class="seach-btn bgfff fl quick-sea">在结果中搜素</button>
                <div class="clear"></div>
                <div class="mt30 ml35 flex ali-c">
                    <el-radio-group v-model="radio" class="seach-radio">
                        <el-radio :label="1">精确查询</el-radio>
                        <el-radio :label="2">模糊查询</el-radio>
                    </el-radio-group>
                </div>
            </div>
            <!-- 检索条件 -->
            <!-- <div class="jstj-label">
                <div class="flex ali-c flex1">
                    <div class="fs18">检索条件</div>
                    <ul class="jstj-list">
                        <li>【标题】+【精确】关键词：民事<i class="el-icon-close jstj-del"></i></li>
                        <li>案例来源：最高人民法院案例选<i class="el-icon-close jstj-del"></i></li>
                        <li>免费<i class="el-icon-close jstj-del"></i></li>
                    </ul>
                </div>
                <div class="fs16 flex ali-c cp">
                    <div class="jstj-clear">
                        <i class="el-icon-delete fs10 cfff"></i>
                    </div>
                    <div class="ml5">清空</div>
                </div>
            </div> -->
            <div class="mt25 flex ali-c jus-b">
                <div class="flex ali-c">
                    <i class="el-icon-s-data fs20 ctheme fw"></i>
                    <div class="flex ali-c" v-if="bookTypeList.length>1">
                        <el-select 
                            v-model="bookTypeId"
                            placeholder="请选择"
                            :popper-append-to-body="false"
                            class="book-select no-popper-arrow ml7"
                        >
                            <el-option
                                v-for="item in bookTypeList"
                                :key="item._id"
                                :label="item.name"
                                :value="item._id"
                            >
                            </el-option>
                        </el-select>
                        <img src="@/static/images/sort_icon.png" class="fs0" width="13" height="9">
                    </div>
                    <div class="fs16 fw ml7" v-else>{{bookTypeList[0].name}}</div>
                </div>
                <el-select 
                    v-model="getFilterCode"
                    placeholder="请选择"
                    :popper-append-to-body="false"
                    class="right-select no-popper-arrow"
                    @change="rightChange"
                >
                    <el-option
                        v-for="item in currTimeList"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                    >
                    </el-option>
                </el-select>
            </div>
            <div class="mt25 flex jus-b">
                <div class="list-wrapfl">
                    <xszk-list-tree
                        v-for="item in getDataTreeColumn"
                        :key="item._id"
                        :treeData="item"
                        :isIcon="false"
                        @noChildChange="columnNoChildChange"
                    ></xszk-list-tree>
                    <xszk-list-tree
                        v-for="item in getDataTreeTime"
                        :key="item._id"
                        :treeData="item"
                        @cateTreeChange="timeTreeChange"
                    ></xszk-list-tree>
                </div>
                <div class="list-wrapfr">
                    <xszkMainView
                        :dataList="getDataList"
                        :isSearchNull="isSearchNull"
                        :currentPage="currentPage"
                        :keyWord="highData.scopeList"
                        :isCart="false"
                        @toCollect="toCollect"
                        @changeSort="changeSort"
                        @onSort="onSort"
                        @itemCollect="itemCollect"
                        @toPubDetails="toPubDetails"
                        @handleCurrentChange="handleCurrentChange"
                        @handleSizeChange="handleSizeChange"
                    ></xszkMainView>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {baseUrl} from '../../http/baseUrl';
export default {
    name: "serDesc",
    components:{
        xszkHeader: (resolve) =>require([ "@/components/xszkHeader",], resolve),
        xszkListTree: (resolve) =>require(["@/components/xszkListTree",], resolve),
        xszkMainView: (resolve) =>require(["@/components/xszkMainView",], resolve),
    },
    computed: {
        token(){
            return this.$store.getters.token;
        },
    },
    data() {
        return {
            isLoginShow:false,
            secondLvName:'',
            threeLvName:'',
            isHighSearch:false,
            isSearchNull: false,
            bookTypeId:'all',
            bookTypeList:[{name:'刑事审判参考',_id:'all'}],
            seachKey:'',
            highData:{
                scopeVal:'and',
                scopeList:[
                    {type:'all',value:'',vag:'0'},
                ],
                classId:'all',
                radioVal:'all',
                author:'',
                local:'',
                time:'',
                source:''
            },
            serVal:{
                _id:'',
                name:'',
            },
            radio:1,
            seachVal:'0',
            seachList:[
                {label:'标题',value:'0'},
                {label:'作者',value:'1'},
                {label:'全文',value:'2'},
            ],
            currTimeList:[],
            getDataTreeColumn:[], //栏目设置
            getDataTreeTime:[], //归属套系卷册
            getDataList:[],
            currentPage: {
                page: 1,
                size: 10,
                total: 0,
            },
            getProData: null,
            getCurrId:'',
            getProductId:'',
            getFilterCode:'',
            //默认降序
            sortStr:"",

            
        };

    },
    methods: {
        toPubDetails(item){
            this.$router.push({path:'/pubDetails',query: {productId:item.book_info.product_id}});
        },
        judgeDataList(){
            if(this.isHighSearch){
                // this.getHighSearch();
            }else{
                this.getCategorysList();
            }
        },
        initDataList(){
            this.currentPage.page = 1;
            this.judgeDataList();
        },
        seachChange(value){
           
        },
        rightChange(val){
            this.getDataTreeTime.forEach(treeItem => {
                treeItem.childList.forEach(treeChildItem => {
                    treeChildItem.childList.forEach(childSonItem => {
                        childSonItem.isOpen = childSonItem.code == val?true:false;
                    });
                })
            });
            this.getDataTreeTime = this.stringutils.deepClone(this.getDataTreeTime);
            this.initDataList();
        },
        toCollect(){
            if(this.token){
                console.log(`toCollect`);
                return false;
            }
            this.isLoginShow = true;
        },
        changeSort(val){
            switch (val) {
                case '0':
                    this.sortStr = "";
                    break;
                case '1':
                    this.sortStr = `&order={"发布时间":"desc"}`;
                    break;
                case '2':
                    this.sortStr = `&order={"update_time":"desc"}`;
                    break;
                case '3':
                    this.sortStr = `&order={"price":"desc"}`;
                    break;
                case '4':
                    this.sortStr = `&order={"hot":"desc"}`;
                    break;
                default:
                    break;
            }
            this.initDataList();
        },
        onSort(isInit,val){
            let stsSort = "desc";
            stsSort = isInit?'desc':'asc';
            switch (val) {
                case '1':
                    this.sortStr = `&order={"发布时间":"${stsSort}"}`;
                    break;
                case '2':
                    this.sortStr = `&order={"update_time":"${stsSort}"}`;
                    break;
                case '3':
                    this.sortStr = `&order={"price":"${stsSort}"}`;
                    break;
                case '4':
                    this.sortStr = `&order={"hot":"${stsSort}"}`;
                    break;
                default:
                    break;
            }
            this.initDataList();
        },
        itemCollect(item){
            if(this.token){
                let currStr = `book_id=${item.product_id}&type=${item.book_info.components.type}`;
                this.addCollect(currStr);
                return false;
            }
            this.isLoginShow = true;
        },
        columnNoChildChange(items){
            this.getDataTreeColumn.forEach(treeItem => {
                treeItem.isOpen = false;
                if(treeItem.childList.length!=0){
                    treeItem.childList.forEach(treeChildItem => {
                        treeChildItem.isOpen=false;
                        if(treeChildItem.childList.length!=0){
                            treeChildItem.childList.forEach(childSonItem => {
                                childSonItem.isOpen = false;
                            });
                        }
                    })
                }
            })
            items.isOpen = true;
            this.getDataTreeColumn = this.stringutils.deepClone(this.getDataTreeColumn);
            this.serVal._id = items._id;
            this.serVal.name = items.name;
            this.initDataList();
        },
        timeTreeChange(item){
            this.getDataTreeTime.forEach(treeItem => {
                treeItem.isOpen = (item.pid == treeItem._id)?true:false;
                if(treeItem.childList.length!=0){
                    treeItem.childList.forEach(treeChildItem => {
                        if(item.pid == treeChildItem._id){
                            treeChildItem.isOpen = true;
                            this.currTimeList = treeChildItem.childList;
                        }else{
                            treeChildItem.isOpen = false;
                        }
                        if(treeChildItem.childList.length!=0){
                            treeChildItem.childList.forEach(childSonItem => {
                                childSonItem.isOpen = false;
                            });
                        }
                    })
                }
            });
            item.isOpen = true;
            this.getDataTreeTime = this.stringutils.deepClone(this.getDataTreeTime);
            this.getFilterCode = item.code; 
            this.initDataList();
        },
        handleCurrentChange(val){
            this.currentPage.page = val;
            this.getCategorysList();
        },
        handleSizeChange(val){
            this.currentPage.size = val;
            this.getCategorysList();
        },
        loopData(resData,rootArr){
            rootArr.forEach(rootItem => {
                resData.forEach(resItem => {
                    if(rootItem._id == resItem.rid&&resItem.type=='group'){
                        rootItem.childList.push(resItem);
                    }
                });
                if(rootItem.childList.length>0){
                    rootItem.childList.forEach(childItem => {
                        resData.forEach(resItem => {
                            if(childItem._id == resItem.pid&&resItem.type=='cate'){
                                if(resItem.children.length>0){
                                    childItem.childList = resItem.children;
                                    childItem.number =  `共${childItem.childList.length}集`;
                                }else{
                                    childItem.number = 0;
                                    childItem.childList.push(resItem);
                                }
                            }
                        });
                    });
                }
                rootItem.childList.reverse();
            });
            return rootArr;
        },
        addCollect(collStr){
            let that = this;
            let data = `${collStr}`;
            this.request.addCollect(data, (res)=> {
                if (res.code == "0") {
                    that.toast.success('收藏成功');
                } else {
                    that.toast.error(res.message);
                }
            });
        },
        //左侧tree时间
        getTreeTime(){
            let that = this;
            let data = {
                product_id: this.getProductId,
                class_id: this.serVal._id
            };
            this.request.getSerVolume(data, (res)=> {
                if (res.code == "0") {
                    that.getDataTreeTime = [];
                    let resData = res.data;
                    let rootArr = [];
                    if(resData.length>0){
                        for (let i in resData) {
                            resData[i].isOpen = false;
                            resData[i].childList = [];
                            resData[i].number = 0;
                            if(resData[i].pid =='root'&&resData[i].type !='time'){
                                rootArr.push(resData[i])
                            }
                        }
                        resData = resData.filter(item=>item.pid !='root');
                        that.getDataTreeTime = that.loopData(resData,rootArr);
                        that.getDataTreeTime[0].childList[0].isOpen = true;
                        that.getDataTreeTime[0].childList[0].childList[0].isOpen = true;
                        that.currTimeList = that.getDataTreeTime[0].childList[0].childList;
                        that.getFilterCode = that.getDataTreeTime[0].childList[0].childList[0].code; 
                        that.getSerDesc(that.getProductId);
                    }
                    console.log(that.getDataTreeTime);
                } else {
                    that.toast.error(res.message);
                }
            });
        },
        // 当前分类右侧list
        getCategorysList(){
            let that = this;
            this.$http({
                method:'GET',
                headers:{
                    PageStart:this.currentPage.page-1,
                    PageOffset:this.currentPage.size,
                    ApiToken:this.token,
                },
                url:`${baseUrl.getBaseUrl()}/_md/lib/api/data_subjects/class/books?class_id=${this.serVal._id}&product_id=${this.getProductId}&name=${this.serVal.name}&filter[归属套系卷册][0]=${this.getFilterCode}${this.sortStr}`,
            }).then(res=>{
                if (res.data.code == "0") {
                    that.getDataList = [];
                    that.currentPage.total = res.data.page.total;
                    let resData = res.data.data;
                    resData.forEach(item => {
                        item.isCheack = false;
                    });
                    that.getDataList = resData;
                    // console.log(that.getDataList);
                } else {
                    that.toast.error(res.data.message);
                }
            });
        },
        getSerDesc(productId){
            let that = this;
            let data = {
                id: productId,
            };
            this.request.getSerDesc(data, (res)=> {
                if (res.code == "0") {
                    let resData = res.data;
                    let columnList = [{name:'栏目设置',_id:'all',childList:[],isOpen:false}]
                    that.getProData = resData;
                    resData.components.columns_info.forEach(item => {
                        item.isOpen = false;
                        item.childList = [];
                        columnList[0].childList.push(item);
                    });
                    that.getDataTreeColumn = that.stringutils.deepClone(columnList);
                    that.getDataTreeColumn[0].childList[0].isOpen = true;
                    console.log(that.getDataTreeColumn);
                    that.serVal._id = that.getDataTreeColumn[0].childList[0]._id;
                    that.serVal.name = that.getDataTreeColumn[0].childList[0].name;
                    that.initDataList();
                } else {
                    that.toast.error(res.message);
                }
            });
        },
    },
   
    created() {
        if(this.$route.query.descData){
            let descData = JSON.parse(this.$route.query.descData);
            this.secondLvName = descData.fromName;
            this.threeLvName = descData.name;
            this.getProductId = descData.productId;
            this.getTreeTime();
            
        }
    },
    
    

};
</script>

<style lang="stylus" scoped>
/deep/.book-select.el-select
    width 115px
    height 30px
/deep/.book-select .el-input__inner
    font-size 16px
    border none
    padding 0 5px
    height 30px
    font-weight bolder
    background none
    color #333
/deep/.book-select .el-select-dropdown
    width 140px
/deep/.right-select.el-select
    width 178px
    height 26px
/deep/.right-select .el-input__inner
    font-size 14px
    border none
    padding 0 5px
    height 26px
    background none
    color #333
/deep/.right-select .el-input__suffix
    top 0px
    right -7px
/deep/.right-select .el-select__caret 
    background url("../../static/images/down_theme.png") no-repeat center
    background-size 12px 10px
/deep/.right-select .el-input__suffix .el-icon-arrow-up:before,
/deep/.book-select .el-input__suffix .el-icon-arrow-up:before  
    content: ""
/deep/.right-select .el-select-dropdown,
    width 178px
/deep/.right-select .el-select-dropdown__item
    font-size 14px
    padding 0 10px
    text-align center
/deep/.book-select .el-select-dropdown__item
    font-size 16px
    padding 0 10px
    text-align center
/deep/.right-select .el-select-dropdown__item:hover,
/deep/.right-select .el-select-dropdown__item.selected,
/deep/.book-select .el-select-dropdown__item:hover,
/deep/.book-select .el-select-dropdown__item.selected
    color #3266CC
    font-weight normal
    text-align center
/deep/.right-select .el-select-dropdown__wrap,
/deep/.book-select .el-select-dropdown__wrap
	margin-bottom: 0 !important
.seach-label
    width 100%
    margin 25px 0
    .seach-warp
        position relative
        width 805px
        height 66px
        line-height 66px
        background #FFFFFF
        box-shadow 0px 0px 5px 1px rgba(193, 210, 255, 0.5)
        border-radius 4px
        padding-right 30px
        border 1px solid #9EA6AF
        .line-gap
            width 2px
            height 100%
            background #ddd
        .seach-input
            display block
            width 78%
            height 66px
            flex-shrink 0
            font-size 18px
            padding-left 35px
        /deep/.seach-input::-webkit-input-placeholder 
            font-size 16px
        .seach-icon
            margin-top 17px
            width 30px
            height 30px
    .seach-btn
        margin-top 13px
        width 150px
        height 40px
        line-height 40px
        text-align center
        font-size 20px
        border 1px solid transparent 
        border-radius 4px
        margin-left 37px
        transition 0.2s
        cursor pointer
    .quick-sea
        width 164px
        margin-left 40px 
    .seach-btn:hover
        opacity 0.85
    .quick-sea:hover
        border-color #3266CC
        color #3266CC
    .radio-item
        cursor pointer
        font-size 14px
        margin-right 25px
    .radio-line
        flex-shrink 0
        width 1px
        height 20px
        background #979797
        margin-left 13px
        margin-right 30px
    /deep/.seach-radio .el-radio 
        margin-right 25px 
    /deep/.seach-radio .el-radio__label 
        font-size 14px
        color #333 
.jstj-label
    width 100%
    min-height 70px
    background #FFFFFF
    border-radius 4px
    color #4A4A4A
    padding 15px 35px
    display flex
    align-items center
    justify-content space-between
    margin-top 20px
    .jstj-clear
        width 18px
        height 18px
        line-height 18px
        margin-top 4px
        text-align center
        background rgba(50, 102, 204, 0.7)
        border-radius 4px
    .jstj-list
        width 90%
        display flex
        align-items center
        flex-wrap wrap
        margin-left 5px
        li  
            position relative
            padding 0 60px 0 15px
            font-size 16px 
            color #4A4A4A
            height 42px
            line-height 42px
            border-radius 4px
            margin-left 25px
            border 1px solid #DDDDDD
            transition 0.2s
            .jstj-del
                position absolute
                top 12px
                font-size 18px
                font-weight bolder
                color #3266CC
                right 8px
                cursor pointer
            &:hover
                background #f2f2f2
.list-wrapfl
    width 240px
    height auto
.list-wrapfr
    width 944px
    height auto
        
</style>